<script lang="ts" setup>
import { SiteGroupFormModalService } from '@/component/SiteGroupFormModal/SiteGroupFormModalService.ts'
import type { ArcoForm } from '@/tool/ArcoFormTool.ts'
import { ref } from 'vue'


const props = withDefaults(
        defineProps<{
            isAdd?: boolean,
            group?: object
        }>(),
        {
            isAdd: false,
        },
)
const formRef = ref<ArcoForm | null>(null)

const {
    isShow, show, hide,
    formIsLoading, formData, formRule, formSubmit,
} = new SiteGroupFormModalService(props, formRef)

</script>

<template>
<div @click="show">
    <slot name="trigger">
        <icon-plus />
    </slot>
</div>

<a-modal
        v-model:visible="isShow"
        :ok-loading="formIsLoading"
        :on-before-ok="formSubmit"
        :title="isAdd ? '添加' : '修改'"
        draggable
        @cancel="hide"
>
    <a-form ref="formRef" :model="formData" :rules="formRule" scroll-to-first-error>
        <a-form-item field="icon" label="图标">
            <a-input v-model="formData.icon" placeholder="图标" readonly />
        </a-form-item>
        <a-form-item field="name" label="名称">
            <a-input v-model="formData.name" placeholder="网站名称" />
        </a-form-item>
    </a-form>
</a-modal>
</template>

<style lang="scss" scoped>

</style>
